<template>
  <div class="parent">
    <div class="pic"></div>
    <div class="title">初识不知曲中意 再听已是曲中人</div>
    <div class="content">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="userName">
          <el-input type="text" v-model="ruleForm2.userName" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm2.password" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="btn">
            <el-button type="primary" @click="submitForm('ruleForm2')">登录</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// import { Login } from '@/api'
export default {
  name: 'Login',
  data () {
    var userName = (rule, value, callback) => {
      let reg = /[a-zA-Z0-9_-]{4,16}$/
      if (value !== '' && reg.test(this.ruleForm2.userName)) {
        callback()
      } else {
        callback(new Error('请输入用户名'))
      }
    }
    var password = (rule, value, callback) => {
      let reg = /[a-zA-Z0-9_]{6,12}$/
      if (value !== '' && reg.test(this.ruleForm2.password)) {
        callback()
      } else {
        callback(new Error('请输入密码'))
      }
    }
    return {
      ruleForm2: {
        userName: '123456',
        password: '123456'
      },
      rules2: {
        userName: [
          {validator: userName, trigger: 'change'}
        ],
        password: [
          {validator: password, trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // let params = {
          //   username: this.ruleForm2.pass,
          //   userpwd: this.ruleForm2.checkPass
          // }
          // this.login(params)
          this.$router.push({
            path: '/Home'
          })
          let userInfo = {
            userName: this.ruleForm2.userName,
            password: this.ruleForm2.password
          }
          sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style scoped lang="less">
.parent{
  width: 100%;
  height: 100%;
  .pic{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('../assets/bg.jpg');
    background-size: 100% 100%;
  }
  .content{
    position: absolute;
    top: 350px;
    left: 50%;
    margin-left: -175px;
    width: 350px;
    height: 240px;
    z-index: 2;
  }
  .title{
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -500px;
    width: 1000px;
    height: 50px;
    font-size: 60px;
    font-weight: 600px;
    color: rgb(20, 197, 173);
    z-index: 2;
  }
}

.btn{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
